<template>
	<div class="addVisiting-container">
		<van-form label-align="left" @submit="onSubmit" ref="addLosingForm">
			<van-cell-group inset>
				<van-field
					v-model="losingDate"
					is-link
					readonly
					name="datePicker"
					label="流失日期"
					required
					:rules="[{ required: true, message: '请选择流失日期' }]"
					@click="showLosingDatePicker = true"
				/>
				<van-popup v-model:show="showLosingDatePicker" position="bottom">
					<van-datetime-picker
						type="date"
						:formatter="formatter"
						@confirm="onConfirmLosingDate"
						@cancel="showLosingDatePicker = false"
					/>
				</van-popup>
				<van-field
					v-model="losingReason.text"
					is-link
					readonly
					name="picker"
					label="流失原因"
					placeholder="点击选择流失原因"
					required
					:rules="[{ required: true, message: '请选择商机来源' }]"
					@click="showLosingReasonPicker = true"
				/>
				<van-popup v-model:show="showLosingReasonPicker" position="bottom">
					<van-picker
						:columns="losingReasonColumns"
						@confirm="onConfirmLosingReason"
						@cancel="showLosingReasonPicker = false"
					/>
				</van-popup>
				<van-field
					v-model="additionalRemark"
					type="textarea"
					name="附加说明"
					label="附加说明"
					placeholder="附加说明"
				/>
			</van-cell-group>
			<div style="margin: 16px;">
				<van-button round block type="primary" native-type="submit">
					保存
				</van-button>
			</div>
		</van-form>
	
	</div>
</template>

<script>
import {onMounted, reactive, ref, toRefs} from "vue";
import {useRouter, useRoute} from "vue-router";
import {formatter, formatterDate} from '@/utils/index.js'
import {getBizDictionary} from "@/api/dictionary.js";
import {updateQuoteStatus} from "@/api/businessOpportunity.js";
import {Toast} from "vant";

export default {
	setup() {
		const router = useRouter()
		const route = useRoute()
		const addLosingForm = ref(null)
		const state = reactive({
			quoteId: '',
			quoteStatus: '',
			losingDate: '',
			showLosingDatePicker: false,
			losingReason: '',
			showLosingReasonPicker: false,
			losingReasonColumns: [],
			additionalRemark: '',
		})
		
		onMounted(() => {
			state.losingDate = formatterDate(new Date())
			if (route.query.quoteId) {
				state.quoteId = route.query.quoteId
				state.quoteStatus = route.query.quoteStatus
			}
			
			initBizDictionary('crm_business_loss_reason')
		})
		
		const initBizDictionary = (code) => {
			getBizDictionary({code}).then((res) => {
				const newDic = transOption(res)
				console.log('bizCode:::', res)
				if (code === 'crm_business_loss_reason') {
					state.losingReasonColumns = newDic
				}
			})
		}
		
		const transOption = (data) => {
			const newDate = []
			data.map((item) => {
				const obj = {
					text: item.dictValue,
					value: item.dictKey
				}
				newDate.push(obj)
			})
			return newDate
		}
		
		const onConfirmLosingDate = (value) => {
			state.losingDate = formatterDate(value)
			state.showLosingDatePicker = false
		}
		
		const onConfirmLosingReason = (value) => {
			state.losingReason = value
			state.showLosingReasonPicker = false
		}
		
		const onSubmit = () => {
			addLosingForm.value.validate().then(() => {
				let params = {
					signDate: state.losingDate,
					losingReason: state.losingReason.value,
					additionalRemark: state.additionalRemark,
					id: state.quoteId,
					originQuotationStatus: state.quoteStatus,
					quotationStatus: "YLS",
				}
				console.log("提交", params)
				updateQuoteStatus(params).then(res => {
					console.log(res)
					Toast.success('操作成功！')
					setTimeout(() => {
						router.back()
					}, 500)
				})
			})
		}
		
		return {
			addLosingForm,
			...toRefs(state),
			onSubmit,
			onConfirmLosingDate,
			onConfirmLosingReason,
			formatter,
		}
	}
}

</script>

<style scoped lang="less">
.addVisiting-container {
	
	.addVisiting-save {
		display: flex;
		justify-content: flex-end;
		margin: 20px;
	}
	
}
</style>